<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变换属性-元素旋转(transform attribute - element rotate)</title>
  <!-- 
  transform: rotate()  是 CSS 中的属性，用于旋转元素。
  transform: rotate()  属性的总结： 
 
    1.  transform: rotate(angle); ：按照指定的角度  angle  顺时针旋转元素。角度可以用度数（deg）、弧度（rad）或梯度（grad）表示。例如， transform: rotate(45deg);  表示将元素顺时针旋转 45 度。 
    
    2.  transform: rotateX(angle); ：绕 X 轴旋转元素。例如， transform: rotateX(90deg);  表示绕 X 轴顺时针旋转 90 度。 
    
    3.  transform: rotateY(angle); ：绕 Y 轴旋转元素。例如， transform: rotateY(180deg);  表示绕 Y 轴顺时针旋转 180 度。 
    
    4.  transform: rotateZ(angle); ：绕 Z 轴旋转元素。 rotateZ()  是默认的旋转方式，等同于  rotate() 。例如， transform: rotateZ(30deg);  表示绕 Z 轴顺时针旋转 30 度。 
   -->
   <style>
    .container {
      display: inline-block;
      border: 4px solid skyblue;
    }

    .container > div {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
  <style>
    .transform-rotate-deg {
      /* 旋转 */
      transform: rotate(50deg);
    }

    .transform-rotate-hover:hover {
      border: 4px solid red;
      /* 旋转 */
      transform: rotate(-45deg);
    }
  </style>
</head>
<body>

  <h3>1. transform-rotate-deg</h3>
  <div class="container">
    <div class="transform-rotate-deg">transform-rotate-deg</div>
  </div>

  <h3>1. transform-rotate-hover</h3>
  <div class="container">
    <div class="transform-rotate-hover"></div>
  </div>
  
</body>
</html>